<template>
  <div>
    <van-sticky>
      <van-nav-bar
        title="修改手机号"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </van-sticky>
    <van-cell-group inset>
      <van-form @submit="onSubmit">
        <van-field
          v-model="phone"
          label="手机号"
          name="validator"
          clearable
          :rules="[
            { required: true, message: '请输入手机号' },
            { validator: isPhone, message: '请正确输入手机号' },
          ]"
          placeholder="请输入手机号"
        >
        </van-field>
        <van-field
          v-model="code"
          center
          clearable
          label="验证码"
          placeholder="请输入验证码"
          :rules="[{ required: true, message: '请输入验证码' }]"
        >
          <template #button>
            <van-button size="small" type="primary" @click="getCode"
              >发送验证码</van-button
            >
          </template>
        </van-field>
        <div class="button">
          <van-button size="small" type="primary" native-type="submit"
            >确认修改</van-button
          >
        </div>
      </van-form>
    </van-cell-group>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, Ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from '/@/store'
import axios from '../../../../../api/axios'
import { Toast } from 'vant'
import { Notify } from 'vant'

export default defineComponent({
  setup() {
    const router = useRouter()
    const { state } = useStore()
    const show = ref(false)
    const { userInfo } = useUserInfo({ show })
    let phone = ref('')
    let code = ref('')
    let prestorePhone = ref('')

    const getCode = () => {
      axios
        .get(`/api/blade-user/send-phone-msg`, {
          params: {
            userId: userInfo.value.id,
            phoneNo: phone.value,
          },
        })
        .then((res) => {
          Toast('短信已发送')
          prestorePhone.value = phone.value
        })
    }

    const isPhone = (val: any) => {
      return /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(
        val
      )
    }

    function onSubmit() {
      if (phone.value === prestorePhone.value) {
        let data = {
          userId: userInfo.value.id,
          phoneNo: phone.value,
          smsCode: code.value,
        }
        axios
          .post(
            `/api/blade-user/reset-phone-no?userId=${userInfo.value.id}&phoneNo=${phone.value}&smsCode=${code.value}`
          )
          .then((res) => {
            Notify({ type: 'success', message: '更改手机号成功！' })
            router.push({
              name: 'Me',
            })
          })
      } else {
        Toast('预留手机号与发送短信手机号不一致')
      }
    }
    return {
      userInfo,
      phone,
      code,
      isPhone,
      onClickLeft() {
        router.push({
          name: 'information',
        })
      },
      getCode,
      onSubmit,
    }
  },
})

function useUserInfo({ show }: { show: Ref<boolean> }) {
  let userInfo = ref<any>({})
  onMounted(getUserInfo)

  async function getUserInfo() {
    const { data } = await axios.get(
      `/api/blade-user/info?time=${new Date().getTime()}`
    )

    userInfo.value = data.data
  }

  return {
    userInfo,
  }
}
</script>

<style lang="less" scoped>
.button {
  text-align: center;
  padding: 10px 0;
}
</style>
